<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-SX98B17QP2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-SX98B17QP2');
    </script>
    <meta charset="UTF-8"> <!-- Set document character encoding to UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Set viewport for mobile devices -->
    <title>Flip Clock - Free Online Full Screen Digital Clock Tool</title> <!-- Set page title -->
    <meta name="description" content="Free online flip clock with full screen display and multiple theme options. Beautiful digital clock interface perfect for meetings, presentations, and decoration. No download required, ready-to-use web clock.">
    <meta name="keywords" content="flip clock,online clock,digital clock,full screen clock,web clock,free clock">
    <link rel="canonical" href="http://flip.clock.toolkitfree.org/index-en.html">
    <link rel="stylesheet" href="style.css"> <!-- Link external CSS file -->
</head>
<body>
    <div class="clock"> <!-- Clock container -->
        <div class="flipper hours"> <!-- Hours flipper -->
            <div class="top">00</div> <!-- Hours top display -->
            <div class="bottom">00</div> <!-- Hours bottom display -->
            <div class="top-flip">00</div> <!-- Hours top flip element -->
            <div class="bottom-flip">00</div> <!-- Hours bottom flip element -->
        </div>
        <div class="divider">:</div> <!-- Time separator -->
        <div class="flipper minutes"> <!-- Minutes flipper -->
            <div class="top">00</div> <!-- Minutes top display -->
            <div class="bottom">00</div> <!-- Minutes bottom display -->
            <div class="top-flip">00</div> <!-- Minutes top flip element -->
            <div class="bottom-flip">00</div> <!-- Minutes bottom flip element -->
        </div>
        <div class="divider">:</div> <!-- Time separator -->
        <div class="flipper seconds"> <!-- Seconds flipper -->
            <div class="top">00</div> <!-- Seconds top display -->
            <div class="bottom">00</div> <!-- Seconds bottom display -->
            <div class="top-flip">00</div> <!-- Seconds top flip element -->
            <div class="bottom-flip">00</div> <!-- Seconds bottom flip element -->
        </div>
    </div>
    <button id="fullscreen-btn" class="fullscreen-btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
        </svg>
    </button>
    <button id="theme-btn" class="theme-btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2v2m0 16v2M4 12H2m20 0h-2m-2.05-6.95l-1.41 1.41M5.46 5.46l-1.41-1.41m0 15.9l1.41-1.41m12.72 0l1.41 1.41M12 6a6 6 0 0 0 0 12 6 6 0 0 0 0-12z"/>
        </svg>
    </button>

    <div id="theme-modal" class="modal">
        <div class="modal-content">
            <h2>Choose Theme</h2>
            <div class="theme-options">
                <div class="theme-option" data-theme="default">
                    <div class="theme-preview default-theme"></div>
                    <span>Classic Theme</span>
                </div>
                <div class="theme-option" data-theme="dark">
                    <div class="theme-preview dark-theme"></div>
                    <span>Dark Theme</span>
                </div>
                <div class="theme-option" data-theme="light">
                    <div class="theme-preview light-theme"></div>
                    <span>Light Theme</span>
                </div>
                <div class="theme-option" data-theme="sunset">
                    <div class="theme-preview sunset-theme"></div>
                    <span>Sunset Theme</span>
                </div>
                <div class="theme-option" data-theme="ocean">
                    <div class="theme-preview ocean-theme"></div>
                    <span>Ocean Theme</span>
                </div>
                <div class="theme-option" data-theme="forest">
                    <div class="theme-preview forest-theme"></div>
                    <span>Forest Theme</span>
                </div>
                <div class="theme-option" data-theme="purple">
                    <div class="theme-preview purple-theme"></div>
                    <span>Purple Theme</span>
                </div>
                <div class="theme-option" data-theme="coffee">
                    <div class="theme-preview coffee-theme"></div>
                    <span>Coffee Theme</span>
                </div>
                <div class="theme-option" data-theme="eyecare">
                    <div class="theme-preview eyecare-theme"></div>
                    <span>Eye Care Theme</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="date-container">
        <div class="solar-date"></div>
        <div class="lunar-date"></div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/lunar-javascript/lunar.js"></script>
    <script src="script.js"></script>
</body>
</html>